<template>
  <div class="publish-container animate__animated animate__fadeInLeft">

    <!-- 页面标题 -->
    <div class="header">
      发布闲置
    </div>
    <!-- 发布内容编辑区域 -->
    <div class="publish-content-container">
      <el-form label-position="top" :model="publishForm" :rules="rules" ref="publishFormRef">
        <!-- 图片上传 -->
        <div class="img-list">
          <el-form-item label="图片" prop="image" style="font-weight: 700;">
            <el-upload id="media" :auto-upload="false" list-type="picture-card" :limit="fileLimit" :file-list="fileList"
              :on-change="(file: UploadFile, newFileList: UploadFile[]) => handleChange(file, newFileList, publishForm)"
              :on-remove="(file: UploadFile, newFileList: UploadFile[]) => handleRemove(file, newFileList, publishForm)"
              :on-exceed="handleExceed" :accept="acceptType" :on-preview="handlePictureCardPreview">
              <div style="font-size: 14px; color: #9999b3">+ 添加优质图或视频</div>
            </el-upload>

            <el-dialog v-model="dialogVisible" :modal="false" :lock-scroll="false" :destroy-on-close="true"
              :show-close="false" style="border-radius: 15px;">
              <template v-if="isVideo">
                <video width="100%" controls>
                  <source :src="dialogMediaUrl" type="video/mp4">
                  您的浏览器不支持视频标签。
                </video>
              </template>
              <template v-else>
                <img width="100%" :src="dialogMediaUrl" alt="" />
              </template>
            </el-dialog>
          </el-form-item>
        </div>

        <!-- 商品标题和描述 -->
        <div class="push-content">
          <el-form-item label="标题" prop="title" style="font-weight: 700;">
            <el-input style="height: 40px; width: 50%; " maxlength="20" show-word-limit type="text" id="title"
              v-model="publishForm.title" placeholder="填写商品标题，可能会更容易卖出哦~" />
          </el-form-item>
          <el-form-item label="描述" prop="intro" style="font-weight: 700;">
            <el-input style="width: 70%;" :rows="5" maxlength="150" show-word-limit type="textarea" id="intro"
              v-model="publishForm.intro" placeholder="描述下宝贝的品牌型号、货品来源..." />
          </el-form-item>
        </div>

        <!-- 选择分类 -->
        <div class="select-category">
          <el-form-item label="分类" prop="typeId" style="width:150px;font-weight: 700;">
            <el-select size="large" placeholder="选择商品分类" v-model="publishForm.typeId" placement="right-start"
              fit-input-width>
              <el-option v-for="item in useProductTypeStore().typeList" :key="item.id" :label="item.typeName"
                :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
        <!-- 发布设置 -->
        <el-form-item label="宝贝位置" prop="adcode" style="font-weight: 700;">
          <div class="address">
            <el-icon style="font-size: 30px; color: #3d8af5;margin-right: 10px;">
              <MapLocation />
            </el-icon>
            <el-cascader size="large" placeholder="请选择省市区" :options="regionData" placement="right-start" v-model="addr"
              @change="watchAddr" style="width: 220px;" />
          </div>
        </el-form-item>

        <el-form-item label="发货方式" prop="postType" style="font-weight: 700;">
          <el-radio-group id="postType" v-model="publishForm.postType">
            <el-radio size="large" value="0" border>邮寄</el-radio>
            <el-radio size="large" value="1" border>自提</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="原价" prop="originalPrice" style="width:170px;font-weight: 700;">
          <el-input-number size="large" required controls-position="right" :precision="2" :step="1" :min="0"
            :max="99999" v-model="publishForm.originalPrice" id="originalPrice">
            <template #prefix>
              <span>￥</span>
            </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="价格" prop="price" style="width:170px;font-weight: 700;">
          <el-input-number size="large" required controls-position="right" :precision="2" :step="1" :min="0"
            :max="99999" v-model="publishForm.price" id="price">
            <template #prefix>
              <span>￥</span>
            </template>
          </el-input-number>
        </el-form-item>
        <!-- 发布or取消按钮 -->
        <div class="submit-cancel">
          <button type="button" class="publish-btn" @click="publish(fileList, publishFormRef)">发布</button>
          <button type="button" @click="reset">重置</button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MapLocation } from '@element-plus/icons-vue'
import { useProductTypeStore } from '@/stores'
// 商品类别相关数据和逻辑
import useCategoryList from '@/hooks/useCategoryList'
const { getAllTypes } = useCategoryList()
// 发布商品的相关数据和逻辑
import usePublish from '@/hooks/usePublish'
const { publishFormRef, publishForm, regionData, addr, rules, publish, reset, watchAddr } = usePublish()
getAllTypes()


// 图片上传相关逻辑
import useUpload from '@/hooks/useUpload'
import type { UploadFile } from 'element-plus'

const { fileList, dialogMediaUrl, acceptType, dialogVisible, isVideo, fileLimit,
  handleChange, handleRemove, handlePictureCardPreview, handleExceed } = useUpload()

</script>

<style lang="less" scoped>
.animate__animated {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.publish-container {
  width: 100%;
  padding: 20px 30px;

  .header {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    font-size: 22px;
    font-weight: 700;
    background: rgba(var(--theme-color-rgb), 0.1);
    color: var(--theme-color);
  }

  .publish-content-container {
    padding: 10px 40px;

    .address {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .submit-cancel {
      margin-top: 30px;

      button {
        width: 80px;
        height: 40px;
        border: none;
        font-size: 16px;
        font-weight: 600;
        border-radius: 20px;
        margin-right: 30px;
        transition: all .2s;

        &:hover {
          cursor: pointer;
          transform: scale(1.08);
        }
      }

      .publish-btn {
        color: #fff;
        background-color: var(--theme-color);
      }
    }

    :deep(.el-input__inner) {
      font-weight: 700;
    }

    :deep(.el-dialog) {
      --el-dialog-width: 60%;
      --el-dialog-bg-color: none;
      --el-dialog-box-shadow: none;
    }
  }
}
</style>
